<template>
  <view class="w-full">
    <!-- 选择器按钮 -->
    <view 
      class="relative w-full px-[32rpx] py-[28rpx] box-border bg-white rounded-[16rpx] border-2 transition-all duration-300 active:opacity-80"
      :class="selectedHospital ? 'border-blue-500 shadow-md' : 'border-gray-200'"
      @click="openSelector"
    >
      <view class="flex items-center justify-between">
        <view class="flex-1 min-w-0 mr-[24rpx]">
          <text class="block text-[28rpx] font-medium mb-[6rpx]" :class="selectedHospital ? 'text-gray-800' : 'text-gray-400'">
            {{ selectedHospital?.name || placeholder }}
          </text>
          <text v-if="selectedHospital" class="block text-[24rpx] text-blue-500">点击重新选择</text>
          <text v-else class="block text-[24rpx] text-gray-400">请选择医院</text>
        </view>
        <view class="flex-shrink-0">
          <IconFont name="arrow-right" size="16" :color="selectedHospital ? '#3b82f6' : '#9ca3af'" />
        </view>
      </view>
    </view>

    <!-- 选择器弹窗 -->
    <nut-popup v-model:visible="showSelector" position="bottom" :style="{ height: '60vh' }" round>
      <view class="h-full flex flex-col bg-gray-50">
        <!-- 标题栏 -->
        <view class="relative px-[32rpx] py-[28rpx] bg-white box-border border-b border-gray-100">
          <view class="flex items-center justify-between">
            <view class="flex-1">
              <text class="block text-[32rpx] font-bold text-gray-800 mb-[6rpx]">选择医院</text>
              <text class="block text-[24rpx] text-gray-500">请选择您的医院</text>
            </view>
            <view class="w-[48rpx] h-[48rpx] flex items-center justify-center active:opacity-60 transition-opacity" @click="closeSelector">
              <IconFont name="close" size="20" color="#9ca3af" />
            </view>
          </view>
        </view>

        <!-- 医院列表 -->
        <view class="flex-1 overflow-y-auto px-[32rpx] py-[24rpx]">
          <view v-if="loading" class="flex items-center justify-center h-[200rpx]">
            <text class="text-[28rpx] text-gray-500">加载中...</text>
          </view>
          
          <view v-else-if="hospitalList.length === 0" class="flex items-center justify-center h-[200rpx]">
            <text class="text-[28rpx] text-gray-500">暂无医院数据</text>
          </view>
          
          <view v-else class="space-y-[16rpx]">
            <view 
              v-for="hospital in hospitalList" 
              :key="hospital.id"
              class="relative p-[24rpx] bg-white rounded-[16rpx] border-2 transition-all duration-300 active:scale-98"
              :class="selectedHospital?.id === hospital.id ? 'border-blue-500 shadow-md' : 'border-gray-200'"
              @click="selectHospital(hospital)"
            >
              <view class="flex items-center justify-between">
                <view class="flex-1">
                  <text class="block text-[30rpx] font-bold text-gray-800 mb-[8rpx]">{{ hospital.name }}</text>
                  <text class="block text-[24rpx] text-gray-500">点击选择此医院</text>
                </view>
                <view v-if="selectedHospital?.id === hospital.id" class="w-[40rpx] h-[40rpx] flex items-center justify-center">
                  <IconFont name="Check" size="20" color="#3b82f6" />
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 底部按钮 -->
        <view class="px-[32rpx] py-[24rpx] bg-white border-t border-gray-100">
          <nut-button 
            type="primary" 
            size="large"
            class="w-full"
            :disabled="!selectedHospital"
            @click="confirmSelection"
          >
            确定选择
          </nut-button>
        </view>
      </view>
    </nut-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'
import { request } from '@/service/request'

// Props
interface Props {
  placeholder?: string
  modelValue?: any
}

const props = withDefaults(defineProps<Props>(), {
  placeholder: '请选择医院'
})

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: any]
  'confirm': [value: any]
}>()

// 响应式数据
const showSelector = ref(false)
const loading = ref(false)
const hospitalList = ref<any[]>([])
const selectedHospital = ref<any>(null)

// 计算属性
const displayText = computed(() => {
  return selectedHospital.value?.name || ''
})

// 方法
const openSelector = () => {
  showSelector.value = true
  if (hospitalList.value.length === 0) {
    loadHospitalList()
  }
}

const closeSelector = () => {
  showSelector.value = false
}

const loadHospitalList = async () => {
  try {
    loading.value = true
    console.log('加载医院列表')
    
    // 这里调用实际的API获取医院列表
    // const response = await request.get('/api/hospitals')
    // hospitalList.value = response.data
    
    // 模拟数据
    hospitalList.value = [
      { id: '1', name: '南宁安好护理站' },
      { id: '2', name: '广西医科大学第二附属医院' },
      { id: '3', name: '南宁市邕宁区人民医院' },
      { id: '4', name: '武宣县人民医院' },
      { id: '5', name: '南宁市第一人民医院' }
    ]
    
    console.log('医院列表加载完成:', hospitalList.value)
  } catch (error) {
    console.error('加载医院列表失败:', error)
  } finally {
    loading.value = false
  }
}

const selectHospital = (hospital: any) => {
  selectedHospital.value = hospital
  console.log('选择医院:', hospital)
}

const confirmSelection = () => {
  if (selectedHospital.value) {
    console.log('确认选择医院:', selectedHospital.value)
    
    // 发送事件
    emit('update:modelValue', selectedHospital.value)
    emit('confirm', selectedHospital.value)
    
    // 关闭弹窗
    closeSelector()
  }
}

// 初始化
onMounted(() => {
  if (props.modelValue) {
    selectedHospital.value = props.modelValue
  }
})
</script>

<style scoped lang="scss">
// 样式已在模板中定义
</style>
